<template>
	<div class="goodsInfo-container">
		<transition
		@before-enter="beforeEnter" 
		@enter="enter" 
		@after-enter="afterEnter"
		>
		<div class="ball" v-show="ballFlag" ref="ball"></div>
	</transition>
	<div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<swiper :getlunbo="lunbotuList" :isfull="true"></swiper>
			</div>
		</div>
	</div>
	<div class="mui-card">
		<div class="mui-card-header">商品</div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<h3>{{ goodsinfo.title }}</h3>
				<p>
					<span>市场价：￥{{ goodsinfo.market_price }}</span>
					<span>销售价:￥{{ goodsinfo.sell_price }}</span>
				</p>
				<p>
					<span>购买数量:</span>
					<numberBox @getcount="getShopCar" :max="goodsinfo.stock_quantity"></numberBox>
				</p>
				<div class="operation">
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="balltraggle">加入购物车</mt-button>
				</div>
			</div>
		</div>
		<div class="mui-card-footer">商品价格</div>
	</div>

	<div class="mui-card">
		<div class="mui-card-header mui-card-media" style=""></div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<p>商品货号：{{ goodsinfo.goods_no }}</p>
				<p>库存情况：{{ goodsinfo.stock_quantity }}</p>
				<p>上架时间：{{ goodsinfo.add_time }}</p>
			</div>
		</div>
		<div class="mui-card-footer">
			<mt-button type="primary" size="large" plain @click="getPic">图片介绍</mt-button>
			<mt-button type="danger" size="large" plain @click="getcomments">商品评论</mt-button>
		</div>
	</div>
</div>
</template>

<script>
	import swiper from '../subcomponents/swiper.vue'
	import numberBox from '../subcomponents/goods_numberBox.vue'
	export default {
		data () {
			return{
				id: this.$route.params.id,
				lunbotuList:[],
				goodsinfo:[],
				ballFlag:false,
				shopCar:1,
			}
		},
		created () {
			this.getlunbotu ()
			this.getGoodsinfo()
		},
		methods: {
			getlunbotu () {
				this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(result => {
					if (result.body.status === 0) {
						// console.log(result.body.message)
						this.lunbotuList = result.body.message;
					}
				})
			},
			getGoodsinfo () {
				this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/' + this.id).then(result => {
					if (result.body.status === 0) {
						console.log(result)
						this.goodsinfo = result.body.message[0];
					}
				})
			},
			getPic () {
				this.$router.push({ name: 'GoodPic', params: { id: this.id } })
			},
			getcomments () {
				this.$router.push({ name: 'Goodcomments', params: { id: this.id } })
			},
			balltraggle () {
				this.ballFlag = !this.ballFlag
			},
			beforeEnter (el) {
				el.style.transform = "translate(0px, 0px)"
			},
			enter (el, done) {
				el.offsetWidth;
				
				// 获取小球的 在页面中的位置
				const ballPosition = this.$refs.ball.getBoundingClientRect()
				console.log(ballPosition)
				// 获取徽标在页面中的位置
				const badgePosition = document.getElementById('badge').getBoundingClientRect()

				const xDist = badgePosition.left - ballPosition.left
				const yDist = badgePosition.top - ballPosition.top;
				console.log(xDist, yDist)
				el.style.transform = `translate(${ xDist }px, ${ yDist }px)`
				el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
				done()
			},
			afterEnter (el) {
				this.ballFlag = !this.ballFlag
			},
			getShopCar (count) {
				this.shopCar = count
				console.log(count)
			}
		},
		components:{
			swiper,
			numberBox
		}
	}

</script>

<style lang="less">
	.goodsInfo-container{
		background-color: #ccc;
		overflow:hidden;
		.ball{
			width: 15px;
			height: 15px;
			background-color: red;
			position: absolute;
			border-radius: 50%;
			top:420px;
			left: 149px;
			z-index: 99;
		}
		.mui-card-footer {
			display: block;
		}
	}
</style>